<div class="row">
  <div class="col-12">
      <div class="card">
          <div class="card-body">

            <h4 class="card-title">Barra de progreso</h4>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" [attr.ariaValuenow]="progreso1" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" [style.width]="progreso1 + '%'"></div>
            </div>

            <br>

            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" [attr.ariaValuenow]="progreso2" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" [style.width]="progreso2 + '%'"></div>
            </div>
          </div>
      </div>
  </div>
</div>

<div class="row">
  <div class="col-6">
      <div class="card">
          <div class="card-body">

            <app-incrementador (cambioValor)="this.progreso1 = $event"
                                nombre="Progress Azul"
                                [progreso]="progreso1"
                                [btnClass]="'btn-info'"
                                >
            </app-incrementador>

          </div>
      </div>
  </div>

  <div class="col-6">
    <div class="card">
        <div class="card-body">

          <app-incrementador (cambioValor)="this.progreso2 = $event"
                             nombre="Progress Verde"
                             [progreso]="progreso2"
                             [btnClass]="'btn-success'"
                             >
          </app-incrementador>

        </div>
    </div>
</div>
</div>
